<template>
  <div class="index">
    <h1>Index</h1>
    <el-button @click="handleClick">Click Me</el-button>
    <el-button>
      <NuxtLink to="/about?id=123">Go to About</NuxtLink>
    </el-button>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { ElHeader, ElMain, ElFooter, ElButton } from 'element-plus';

const handleClick = () => {
  console.log("Button clicked");
};

onMounted(() => {
  console.log("index");
});
</script>

<style scoped>
.index {
  text-align: center;
  padding: 20px;
}

el-header, el-main, el-footer {
  margin: 10px 0;
}

el-button {
  margin: 10px 0;
}
</style>